import IconFont from '@/assets/iconfont';
import {IOnlineMusic} from '@/common/type';
import Touchable from '@/components/touchable';
import React from 'react';
import {View, StyleSheet, Image, Text} from 'react-native';
interface Iprops {
  index: number;
  item: IOnlineMusic;
}
class OnlineMusic extends React.Component<Iprops> {
  render(): React.ReactNode {
    const {index, item} = this.props;
    return (
      <Touchable
        key={index}
        style={style.onlineMusicItem}
        onPress={() => {
          console.log('----onPress');
        }}>
        <View>
          <Image
            key={index}
            source={{
              uri: item.img,
            }}
            style={style.img}
          />
        </View>
        <View style={style.right}>
          <Text>{item.title}</Text>
          <View style={style.remark}>
            <Text>{item.remark}</Text>
          </View>
          <View style={style.footer}>
            <IconFont name="icon-erji" size={16} color={'#f86442'} />
            <Text style={style.textRight}>{item.played}</Text>
            <IconFont
              name="icon-a-zhengzaizhibozhengzaibofang"
              size={16}
              color={'#f86442'}
            />
            <Text>{item.nowListen}</Text>
          </View>
        </View>
      </Touchable>
    );
  }
}

const style = StyleSheet.create({
  onlineMusicItem: {
    flexDirection: 'row',
    backgroundColor: '#fff',
    padding: 6,
    borderRadius: 8,
    margin: 16,
    marginBottom: 10,
    marginTop: 0,
    // 阴影效果（安卓只能这样，设置会改变层次z-index）
    elevation: 3,
  },
  img: {
    borderRadius: 8,
    width: 66,
    height: 66,
  },
  right: {
    marginLeft: 16,
    flexDirection: 'column',
    justifyContent: 'space-around',
    flex: 1,
  },
  textRight: {
    marginRight: 16,
  },
  remark: {
    backgroundColor: '#eee',
    borderRadius: 6,
  },
  footer: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  played: {
    marginRight: 10,
  },
});
export default OnlineMusic;
